<template>
	<view class=" color9F9F9F size32 posire conLeft  u-f-column u-f" :class="{conLeft1:conLeft}"
		v-show="!fullScreenFlag">
		<image mode="widthFix" class="image width60 posiab right0 cursor" :style="{top:hhg/2-40+'px'}"
			src="/static/img/gsuanbi.png" @click="conLeft = !conLeft"></image>
		<view class="tab u-f-item  border-b3e3e3e">
			<view @click="taptab(index)" :class="tindex == index?'active':''" class="item cursor"
				v-for="(item,index) in ['设备','收藏']" :key="index">
				{{item}}
				<view v-if="tindex==index" class="heng "></view>
			</view>
		</view>
		<view class="u-f u-f-column u-f-jsb flex1" style="overflow: hidden;">
			<view v-if="tindex==0" class="flex1 u-f u-f-column" style="overflow: hidden;">
				<view class="leftTop flex-a-i posire mt25">
					<view class="flex-ju-c wh120-60 ra10 bg5c5c5c mr20 cursor"
						:class="{LanSeBeiJing:leftTopIndex==index}" v-for="(item,index) in ['组织搜索','通道搜索']" :key="index"
						@click="leftTopIndex = index">
						{{item}}
					</view>
					<el-input v-model="searchName" class="bg1e1e1e flex1 mr50 height60  pl15"
						:placeholder="leftTopIndex==0?'输入组织名称进行搜索':'输入通道名称进行搜索'" clearable @blur="getDevicesList"
						@change="getDevicesList" />
				</view>
				<view class="leftList ">
					<view class="sanDian " v-if="dataSource.length">
						<el-dropdown placement="bottom-end">
							<view class="dianBox u-f-justify">
								<view></view>
								<view></view>
								<view></view>
							</view>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="getDevicesList">刷新</el-dropdown-item>
								</el-dropdown-menu>
								<el-dropdown-menu>
									<el-dropdown-item @click="PuManChuangKou">铺满窗口</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</view>
					<el-tree style="background: #2c2c2c;color:#fff;" :data="dataSource" node-key="id" default-expand-all
						:expand-on-click-node="false" @node-click="nodeClick" v-if="dataSource.length">
						<template #default="{ node, data }">
							<view class="customNode1 u-f-item u-f-jsb"
								v-if="data.online_status==1&&currentKey==data.id">
								<view class="xuanZhong"></view>
								<view class="u-f-item dian" @click="xxFlag = !xxFlag">
									<view class="xiaodian"></view>
									<view class="xiaodian"></view>
									<view class="xiaodian"></view>

									<view class="xuanXiang u-f-justify u-f-column" ref="xuanXiang" v-if="xxFlag">
										<view class="item u-f-item " @click="sheBeiJiaRuShouChangJia(data)">
											<view class="itmeIocn">
												<image class="img" src="/static/img/jiankong/35.png" mode="widthFix">
												</image>
											</view>
											<view class="itemName">添加收藏</view>
										</view>
										<view class="item u-f-item " @click="turningFalg = true">
											<view class="itmeIocn">
												<image class="img" src="/static/img/jiankong/36.png" mode="widthFix">
												</image>
											</view>
											<view class="itemName">添加到轮巡</view>
										</view>
									</view>
								</view>
							</view>

							<view class="custom-tree-node flex-ju-b width1000" @click="ziyuanShuClick(data)">
								<view class="flex-a-i">
									<view v-if="data.online_status==1" class="staDian">
									</view>
									<view v-if="data.online_status==2" class="staDian1">
									</view>
									<image mode="widthFix" v-if="data.online_status==1&&data.camera_type==3"
										class="image width45" src="/static/img/shexaingtou.png">
									</image>
									<image mode="widthFix" v-if="data.online_status==0&&data.camera_type==3"
										class="image width45" src="/static/img/jiankong/66.png">
									</image>
									<image mode="widthFix" v-if="data.online_status==1&&data.camera_type!=3"
										class="image width45" src="/static/img/jiankong/96.png">
									</image>
									<image mode="widthFix" v-if="data.online_status==0&&data.camera_type!=3"
										class="image width45" src="/static/img/jiankong/97.png">
									</image>
									<view class="labelText">{{data.name}}</view>
								</view>
								<view class="u-f-item  posire ">
								</view>
							</view>
						</template>
					</el-tree>

					<view class="u-f-justify u-f-column " style="padding-top: 100px;" v-else>
						<view>
							<image style="width: 200px;" src="/static/img/jiankong/42.png" mode="widthFix">
							</image>
						</view>
						<view>暂未查询到内容</view>
					</view>
				</view>
			</view>
			<view v-if="tindex==1" clas="flex1" style="overflow: hidden;">
				<view class="leftTop flex-a-i posire mt25" style="padding-left: 12px;margin-bottom: 14px;">
					<el-input v-model="deviceName" class="bg1e1e1e flex1 mr50 height60 ml20 pl15"
						placeholder="输入通道名称进行搜索" clearable @blur="shouchangList = [],getFavoritesList()"
						@change="shouchangList = [],getFavoritesList()" />
					<image mode="widthFix" class="image width45 posiab right80" src="/static/img/suosuo.png">
					</image>
				</view>
				<view class="shouchangHang u-f-item u-f-jsb">
					<view class="u-f-item hangLeft">
						<view class="icon">
							<image src="/static/img/jiankong/51.png" class="img" mode="widthFix"></image>
						</view>
						<view class="text">
							收藏夹
						</view>
					</view>
					<view class="u-f-item">
						<view class="caozuo u-f-item cursor" @click="ChuangJianShouChangJia">
							<view class="icon">
								<image src="/static/img/jiankong/52.png" class="img" mode="widthFix"></image>
							</view>
							<view class="text">
								创建
							</view>
						</view>
						<el-popconfirm title="删除后不可恢复，请谨慎操作?" @confirm="ShanChuShouCangJia">
							<template #reference>
								<view class="caozuo u-f-item cursor" style="margin: 0 24px;">
									<view class="icon">
										<image src="/static/img/jiankong/53.png" class="img" mode="widthFix">
										</image>
									</view>
									<view class="text">
										删除
									</view>
								</view>
							</template>
						</el-popconfirm>
						<view class="caozuo u-f-item cursor" style="margin-right: 24px;"
							@click="shouchangList = [],getFavoritesList()">
							<view class="icon">
								<image src="/static/img/jiankong/54.png" class="img" mode="widthFix"></image>
							</view>
							<view class="text">
								刷新
							</view>
						</view>
					</view>
				</view>
				<view class="shouchangList">
					<el-tree style="background: #2c2c2c;color:#fff;" :data="shouchangList" node-key="id"
						:expand-on-click-node="false" @node-click="nodeClick" v-if="shouchangList.length"
						:default-expanded-keys="false" default-expand-all>
						<template #default="{ node, data }">
							<view class="customNode1 u-f-item u-f-jsb" v-if="data.onlineStatus==1&&currentKey==data.id">
								<view class="xuanZhong"></view>
								<el-dropdown placement="bottom-end">
									<view class="u-f-item dian">
										<view class="xiaodian"></view>
										<view class="xiaodian"></view>
										<view class="xiaodian"></view>
									</view>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="ShanChuSheBei(data)">删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</view>
							<view v-if="data.favoritesName">
								<image src="/static/img/jiankong/55.png" style="width: 24px;" mode="widthFix">
								</image>
							</view>
							<view class="labelText" @click="shouChangItemClick(data)">
								<view class="text singleLine" v-if="data.id!=shouChangId">
									{{data.favoritesName}}<text v-if="ZhuZhiId==data.id"
										style="white-space:nowrap;color:rgb(185 185 185)">（已选中分组）</text>
								</view>
								<view class="input u-f-item" v-else>
									<input type="text" v-model="data.favoritesName" focus @blur="inputBlur(data)">
								</view>
							</view>

							<view class="custom-tree-node flex-ju-b width1000" @click="ziyuanShuClick(data)">
								<view class="flex-a-i width1000">

									<view v-if="data.onlineStatus==1" class="staDian">

									</view>
									<view v-if="data.onlineStatus==2" class="staDian1">

									</view>
									<image mode="widthFix" v-if="data.onlineStatus==1&&data.cameraType==3"
										class="image width45" src="/static/img/shexaingtou.png">
									</image>
									<image mode="widthFix" v-if="data.onlineStatus==0&&data.cameraType==3"
										class="image width45" src="/static/img/jiankong/66.png">
									</image>
									<image mode="widthFix" v-if="data.onlineStatus==1&&data.cameraType!=3"
										class="image width45" src="/static/img/jiankong/96.png">
									</image>
									<image mode="widthFix" v-if="data.onlineStatus==0&&data.cameraType!=3"
										class="image width45" src="/static/img/jiankong/97.png">
									</image>
									<view class="labelText">{{data.name}}</view>
								</view>
							</view>
						</template>
					</el-tree>
				</view>
			</view>
			<view class="leftBottom u-f-column u-f">
				<view class="caoZuo u-f-item u-f-jsb">
					<view class="left u-f-item">
						<view class="tabItem u-f-justify cursor" :class="{tabItem1:tabIndex==index}"
							v-for="(item,index) in tabList" :key="index" @click="tabIndex = index">
							{{item.name}}
							<view v-if="tabIndex==index"></view>
						</view>
					</view>
					<template v-if="ShiPingLiuList[itemIndex].is_support_ptz==1&&checkInfo.canOperate==1">
						<el-popconfirm title="锁定云台后，只有当前登录用户 可以操作云台，确认锁定吗？" @confirm="SuoDingYunTai">
							<template #reference>
								<view class="right u-f-justify">
									<view class="icon cursor">
										<image src="/static/img/jiankong/57.png" class="img" mode="widthFix">
										</image>
									</view>
									<view class="text cursor">锁定</view>
								</view>
							</template>
						</el-popconfirm>
					</template>
					<view class="right u-f-justify"
						v-if="ShiPingLiuList[itemIndex].is_support_ptz==1&&checkInfo.canOperate==0">
						<view class="icon cursor">
							<image src="/static/img/jiankong/99.png" class="img" mode="widthFix"></image>
						</view>
						<view class="text cursor">已锁定</view>
					</view>
				</view>
				<view class=" flex1" v-if="tabList[tabIndex].index==1" style="position: relative;">
					<view class="addYuzhidian u-f-justify cursor" @click="PresetStaFalg">
						<view class="u-f-justify">
							<image src="/static/img/jiankong/62.png" style="width: 14px;margin-right: 5px;"
								mode="widthFix">
							</image>
						</view>
						<view>添加预置点</view>
					</view>
					<view class="yunkongzhi u-f-justify u-f ">
						<view class="kongzhitai">
							<view class="kongzhiImg u-f-justify">
								<image src="/static/img/jiankong/58.png" class="img" mode="widthFix"></image>
								<view class="circle">
									<view class="sector u-f-justify " style="--i: 0;">

									</view>
									<view class="sector u-f-justify " style="--i: 1;">

									</view>
									<view class="sector u-f-justify " style="--i: 2;">

									</view>
									<view class="sector u-f-justify " style="--i: 3;">

									</view>
									<view class="sector u-f-justify " style="--i: 4;">

									</view>
									<view class="sector u-f-justify" style="--i: 5;">

									</view>
									<view class="sector u-f-justify" style="--i: 6;">

									</view>
									<view class="sector u-f-justify" style="--i: 7;">

									</view>
								</view>
								<view class="yuan u-f-justify">
									<view class="yuan1 u-f-justify">
										<view class="yuan2 u-f-justify"></view>
									</view>
								</view>
								<view class="jiantou1 u-f-justify" @click="YunTaiYiDong(1)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
								<view class="jiantou1 u-f-justify" @click="YunTaiYiDong(6)"
									style="transform: rotate(calc(45deg)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
								<view class="jiantou1 u-f-justify" @click="YunTaiYiDong(4)"
									style="transform: rotate(calc(90deg)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
								<view class="jiantou1 u-f-justify" @click="YunTaiYiDong(8)"
									style="transform: rotate(calc(135deg)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
								<view class="jiantou2 u-f-justify" @click="YunTaiYiDong(2)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
								<view class="jiantou2 u-f-justify" @click="YunTaiYiDong(7)"
									style="transform: rotate(calc(45deg)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
								<view class="jiantou2 u-f-justify" @click="YunTaiYiDong(3)"
									style="transform: rotate(calc(90deg)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
								<view class="jiantou2 u-f-justify" @click="YunTaiYiDong(5)"
									style="transform: rotate(calc(135deg)">
									<image src="/static/img/jiankong/59.png" style="width: 24px;" mode="widthFix">
									</image>
								</view>
							</view>

						</view>
						<view class="jiajiang">
							<view class="item u-f-item">
								<view class="text">变倍</view>
								<view class="quan u-f-item u-f-jsb">
									<view class="u-f-justify" @click="YunTaiYiDong(11)">
										<image src="/static/img/jiankong/60.png" style="width: 28px;" mode="widthFix">
										</image>
									</view>
									<view class="u-f-justify" @click="YunTaiYiDong(12)">
										<image src="/static/img/jiankong/61.png" style="width: 28px;" mode="widthFix">
										</image>
									</view>
								</view>
							</view>
							<view class="item u-f-item">
								<view class="text">焦点</view>
								<view class="quan u-f-item u-f-jsb">
									<view class="u-f-justify" @click="YunTaiYiDong(9)">
										<image src="/static/img/jiankong/60.png" style="width: 28px;" mode="widthFix">
										</image>
									</view>
									<view class="u-f-justify" @click="YunTaiYiDong(10)">
										<image src="/static/img/jiankong/61.png" style="width: 28px;" mode="widthFix">
										</image>
									</view>
								</view>
							</view>
							<view class="item u-f-item">
								<view class="text">光圈</view>
								<view class="quan u-f-item u-f-jsb">
									<view class="u-f-justify" @click="YunTaiYiDong(13)">
										<image src="/static/img/jiankong/60.png" style="width: 28px;" mode="widthFix">
										</image>
									</view>
									<view class="u-f-justify" @click="YunTaiYiDong(14)">
										<image src="/static/img/jiankong/61.png" style="width: 28px;" mode="widthFix">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="u-f-justify buchang">
						<view class="text">
							步长
						</view>
						<el-slider v-model="buChang" style="width: 200px;" :max="10" :min="1" />
						<view class="text">
							{{buChang}}
						</view>
					</view>
				</view>

				<view class="yuzhidian flex1 u-f-item u-f-column" v-if="tabList[tabIndex].index==2"
					style="position: relative;">
					<view class="u-f-item">
						<uni-data-select :value="YuZhiDianListIten1" :localdata="YuZhiDianList1"
							@change="YuZhiDianXiaLaChange" :clear="false" style="width: 270px;color: #000;"
							class="custom-select">
						</uni-data-select>
						<view class=" zhuandao u-f-justify cursor" @click="ZhuanDaoYuZhiDian">
							<view class="u-f-justify">
								<image src="/static/img/jiankong/63.png" style="width: 16px;" mode="widthFix">
								</image>
							</view>
							<view class="text">转到</view>
						</view>
					</view>
					<view class="u-f-item set">
						<view class="u-f-item">
							<view>
								<image src="/static/img/jiankong/64.png" style="width: 24px;" mode="widthFix">
								</image>
							</view>
							<view class="text">看守点</view>
						</view>
						<view class="box u-f-item">
							<view class="text">
								{{KanShouDianInfo.name}}
							</view>
						</view>
						<view class=" zhuandao u-f-justify cursor" @click="setGuardFalg = true">
							<view class="u-f-justify">
								<image src="/static/img/jiankong/65.png" style="width: 16px;" mode="widthFix">
								</image>
							</view>
							<view class="text">设置</view>
						</view>
					</view>
					<view class="paixu">
						<view class="titleItem u-f-item">
							<view class="item1">序号</view>
							<view class="item2">预置点</view>
							<view class="item3">操作</view>
						</view>
						<scroll-view scroll-y style="height:130px;">
							<view class="titleItem u-f-item" v-for="(item,index) in YuZhiDianList" :key="index">
								<view class="item1">{{index + 1}}</view>
								<view class="item2">{{item.presetName}}</view>
								<view class="item3 u-f-item">
									<view class="u-f-item bianji cursor" @click="BianJiYuZhiDian(item)">
										<view>
											<image src="/static/img/jiankong/67.png" style="width: 16px;"
												mode="widthFix"></image>
										</view>
										<view class="text">编辑</view>
									</view>
									<el-popconfirm title="删除后不可恢复，请谨慎操作!" @confirm="ShanChuYuZhiDian(item)">
										<template #reference>
											<view class="u-f-item shanchu cursor">
												<view>
													<image src="/static/img/jiankong/68.png" style="width: 16px;"
														mode="widthFix"></image>
												</view>
												<view class="text">删除</view>
											</view>
										</template>
									</el-popconfirm>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="cruise flex1  u-f-column" v-if="tabList[tabIndex].index==3" style="position: relative;">
					<view class="addYuzhidian u-f-justify cursor" @click="TianJiaXunHang ">
						<view class="u-f-justify">
							<image src="/static/img/jiankong/62.png" style="width: 14px;margin-right: 5px;"
								mode="widthFix">
							</image>
						</view>
						<view>添加巡航</view>
					</view>
					<view class="u-f-item u-f-jsb ">
						<view>
							<uni-data-select :value="XunHangXuanZhong" :localdata="XunHangList1"
								@change="XunHangXuanZhongChange" :clear="false" style="width: 270px;color: #000;"
								class="custom-select">
							</uni-data-select>
						</view>
						<view class="ksxh u-f-justify cursor" @click="KaiShiXunHang(2)"
							v-if="XunHangXuanZhong!==''&&XunHangList[XunHangXuanZhong].isCruise==0">
							<view class="icon">
								<image src="/static/img/jiankong/69.png" style="width: 14px;margin-right: 5px;"
									mode="widthFix">
								</image>
							</view>
							<view>
								开始巡航
							</view>
						</view>
						<el-popconfirm title="确认停止当前巡航吗？" @confirm="KaiShiXunHang(1)">
							<template #reference>
								<view class="ksxh u-f-justify cursor"
									v-if="XunHangXuanZhong!==''&&XunHangList[XunHangXuanZhong].isCruise==1">
									<view class="icon">
										<image src="/static/img/jiankong/98.png" style="width: 14px;margin-right: 5px;"
											mode="widthFix">
										</image>
									</view>
									<view>
										停止巡航
									</view>
								</view>
							</template>
						</el-popconfirm>

					</view>
					<view class="paixu">
						<view class="titleItem u-f-item">
							<view class="item1">序号</view>
							<view class="item2">巡航</view>
							<view class="item3">操作</view>
						</view>
						<view class="titleItem u-f-item" v-for="(item,index) in XunHangList" :key="index">
							<view class="item1">{{index + 1}}</view>
							<view class="item2">{{item.patrolName}}</view>
							<view class="item3 u-f-item">
								<view class="u-f-item bianji cursor" @click="BianJiXunHangFn(item)">
									<view>
										<image src="/static/img/jiankong/67.png" style="width: 16px;" mode="widthFix">
										</image>
									</view>
									<view class="text">编辑</view>
								</view>
								<el-popconfirm title="确定删除巡航吗？" @confirm="ShanChuXunHangItem(item)">
									<template #reference>
										<view class="u-f-item shanchu cursor">
											<view>
												<image src="/static/img/jiankong/68.png" style="width: 16px;"
													mode="widthFix"></image>
											</view>
											<view class="text">删除</view>
										</view>
									</template>
								</el-popconfirm>

							</view>
						</view>
					</view>
				</view>
				<view class="VideoParameters flex1  u-f-column u-f-justify" v-if="tabList[tabIndex].index==4"
					style="position: relative;">
					<view class="item u-f-item">
						<view class="left">亮度</view>
						<view class="right">
							<el-slider v-model="sliderValue1" :step="10" show-stops :max="100"
								@change="sliderChange(1)" />
						</view>
					</view>
					<view class="item u-f-item">
						<view class="left">对比度</view>
						<view class="right">
							<el-slider v-model="sliderValue2" :step="10" show-stops :max="100"
								@change="sliderChange(2)" />
						</view>
					</view>
					<view class="item u-f-item">
						<view class="left">饱和度</view>
						<view class="right">
							<el-slider v-model="sliderValue3" :step="10" show-stops :max="100"
								@change="sliderChange(3)" />
						</view>
					</view>
					<view class="item u-f-item">
						<view class="left">色度</view>
						<view class="right">
							<el-slider v-model="sliderValue4" :step="10" show-stops :max="100"
								@change="sliderChange(4)" />
						</view>
					</view>
					<view class="item u-f-item">
						<view class="left">锐度</view>
						<view class="right">
							<el-slider v-model="sliderValue5" :step="10" show-stops :max="100"
								@change="sliderChange(5)" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchName: '',
				leftTopIndex: 0, //左上角 组织跟通道
				xxFlag: false
			}
		},
		props: {
			tindex: {},
			dataSource: {},
			currentKey: {}
		},
		methods: {
			taptab(index) {
				this.$emit('taptab', index)
			},
			getDevicesList() {
				// 刷新列表
				this.$emit('getDevicesList')
			},
			PuManChuangKou() {
				// 铺满窗口
				this.$emit('PuManChuangKou')

			},
			nodeClick(e) {
				this.$emit('nodeClick', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.conLeft {
		overflow: hidden;
		width: 411px;
		transition: all 0.3s;
		background-color: #2C2C2C;
		height: 100%;

		.tab {
			width: 411px;
			min-height: 42px;

			.item {
				margin-left: 24px;
				position: relative;

				.heng {
					position: absolute;
					width: 33px;
					height: 3px;
					background: #ffffff;
					border-radius: 15px;
					bottom: -10px;
				}
			}

			.active {
				color: #fff;
			}


		}

		.leftTop {
			padding-left: 24px;
			margin-bottom: 24px;

			.LanSeBeiJing {
				background: #165fff;
				color: #fff;
			}

			input {
				color: #fff;
			}

			.wh120-60 {
				width: 80px
			}
		}

		.leftList {
			overflow: scroll;
			height: 87%;
			position: relative;

			.sanDian {
				position: absolute;
				right: 10px;
				top: 10px;
				z-index: 9;

				.dianBox {
					width: 40px;
					height: 16px;
					border: none;

					view {
						width: 4px;
						height: 4px;
						background: #ffffff;
						margin-right: 4px;
					}
				}

			}
		}

		.leftList::-webkit-scrollbar {
			display: none;
			/* Chrome 和 Safari 隐藏滚动条 */
		}

		.shouchangHang {
			padding-left: 24px;

			.hangLeft {
				.icon {
					width: 24px;
				}

				.text {
					font-size: 14px;
					font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ffffff;
					margin-left: 10px;
				}
			}

			.caozuo {
				.icon {
					width: 24px;
					margin-right: 5px;
				}

				.text {
					font-size: 14px;
					font-family: Microsoft YaHei, Microsoft YaHei-400;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}

		.staDian {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: #00E47C;
			margin-right: 10px;
		}

		.staDian1 {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: #FF5964;
			margin-right: 10px;
		}

		.labelText {
			margin-left: 5px;

			.input {
				width: 313px;
				height: 29px;
				border: 1px solid #165fff;
				border-radius: 2px;
				color: #fff;
			}
		}

		.shouchangList::-webkit-scrollbar {
			display: none;
			/* Chrome 和 Safari 隐藏滚动条 */
		}

		.shouchangList {
			padding-top: 10px;
			width: 100%;
			overflow: scroll;
			height: 80%;

			.item {
				width: 100%;

				.icon {
					width: 24px;
					margin-right: 5px;
					transform: rotate(-90deg);
				}

				.icon1 {
					transform: rotate(0deg);
				}

				.text {
					font-size: 14px;
					font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ffffff;
					width: 313px;
				}

				.jiedian {
					height: 42px;
					background: #1e1e1e;
					position: relative;
					left: -44px;

					.shu {
						width: 4px;
						height: 42px;
						background: #165fff;
					}

					.yuan {
						margin-left: 50px;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						background-color: #00E47C;
					}

					.icon {
						width: 24px;
						margin: 0 10px;
					}

					.text {
						font-size: 14px;
						font-family: Source Han Sans CN, Source Han Sans CN-400;
						font-weight: 400;
						text-align: LEFT;
						color: #ffffff;
					}

					.dian {
						margin-right: 14px;
						position: absolute;
						height: 42px;
						right: 0;

						.xiaodian {
							width: 5px;
							height: 5px;
							border-radius: 50%;
							background-color: #fff;
							margin-right: 3px;
						}

						.xuanXiang {
							position: absolute;
							width: 108px;
							height: 48px;
							background: #1e1e1e;
							border: 1px solid #383838;
							border-radius: 6px;
							box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
							left: -75px;
							top: 40px;

							.item1 {
								width: 106px;
								height: 36px;

								.itmeIocn {
									width: 16px;
									margin: 0 5px;
								}

								.itemName {}
							}

							.item:hover {
								background: #165fff;
							}

						}
					}
				}

				.input {
					width: 313px;
					height: 29px;
					border: 1px solid #165fff;
					border-radius: 2px;
					color: #fff;
				}
			}
		}

		.leftBottom {
			width: 411px;
			height: 352px;
			background-color: #3f3f3f;

			.caoZuo {
				height: 52px;
				width: 100%;
				border-bottom: 1px solid #5C5C5C;

				.left {
					.tabItem {
						font-size: 14px;
						font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
						font-weight: 400;
						text-align: LEFT;
						color: #9f9f9f;
						margin-left: 14px;
						position: relative;
						width: 56px;
						text-align: center;

						view {
							width: 48px;
							height: 3px;
							background: #ffffff;
							border-radius: 4px;
							position: absolute;
							bottom: -20px;
						}
					}

					.tabItem1 {
						color: #fff;
					}
				}

				.right {
					width: 70px;
					height: 30px;
					background-color: #242424;
					margin-right: 14px;
					color: #fff;
					border-radius: 6px;
					position: relative;

					.icon {
						width: 24px;
					}

					.text {
						font-size: 14px;
					}

					.suoBox {
						position: absolute;
						bottom: -180px;
						width: 286px;
						height: 151px;
						background: #ffffff;
						border-radius: 8px;
						left: -200px;
						z-index: 99;

						.wenzi {
							width: 199px;
							height: 48px;
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #131313;
							line-height: 24px;
							margin-bottom: 24px;
						}

						.quxiao {
							width: 76px;
							height: 32px;
							border: 1px solid #ced4db;
							border-radius: 2px;
							font-size: 14px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;
							text-align: LEFT;
							color: #2f3133;
						}

						.quding {
							width: 76px;
							height: 32px;
							background: #165fff;
							border-radius: 2px;
							margin-left: 24px;
						}
					}
				}
			}

			.addYuzhidian {
				width: 120px;
				height: 35px;
				position: absolute;
				right: 20px;
				top: 15px;
				background-color: #0E4CFD;
				color: #fff;
				border-radius: 10px;
			}

			.cruise {
				width: 383px;
				margin: 0 auto;
				padding: 12px 0;

				.addYuzhidian {
					width: 120px;
					height: 35px;
					position: relative;
					right: 0;
					top: 0;
					background-color: #0E4CFD;
					color: #fff;
					border-radius: 10px;
					margin-bottom: 10px;
				}

				.ksxh {
					background: #585858;
					border-radius: 6px;
					width: 98px;
					height: 32px;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.41) inset, 0px -3px 10px 0px #818181 inset, 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
					color: #fff;
					position: relative;

					.tis {
						position: absolute;
						width: 235px;
						height: 130px;
						background: #ffffff;
						border-radius: 8px;
						top: 40px;
						left: -135px;
						z-index: 9;

						.text {
							font-size: 14px;
							font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
							font-weight: 400;
							text-align: LEFT;
							color: #131313;
							margin-bottom: 20px;
						}

						.quxiao {
							font-size: 14px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;
							text-align: LEFT;
							color: #2f3133;
							width: 76px;
							height: 32px;
							border: 1px solid #ced4db;
							border-radius: 2px;
							margin-right: 20px;
						}

						.quereng {
							font-size: 14px;
							font-family: Microsoft YaHei, Microsoft YaHei-400;
							font-weight: 400;
							text-align: LEFT;
							color: #ffffff;
							width: 76px;
							height: 32px;
							background: #165fff;
							border-radius: 2px;
						}
					}
				}
			}

			.VideoParameters {
				.item {
					margin-bottom: 10px;

					.left {
						font-size: 14px;
						font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
						font-weight: 400;
						text-align: right;
						color: #fff;
						width: 50px;
					}

					.right {
						width: 260px;
						margin-left: 30px;
					}
				}
			}

			.yunkongzhi {
				margin-top: 70px;

				.kongzhitai {
					width: 142px;

					.kongzhiImg {
						width: 142px;
						position: relative;

						.circle {
							position: absolute;
							width: 124px;
							height: 124px;
							border-radius: 50%;
							background: #ccc;
							overflow: hidden;

							.sector {
								position: absolute;
								width: 100%;
								height: 100%;
								clip-path: polygon(50% 50%, 100% 0, 100% 100%);
								transform: rotate(calc(45deg * var(--i)));
								background-color: #585858;
							}

							.sector1 {
								// background-color: #454545;
								z-index: 9;
							}
						}

						.yuan {
							width: 50px;
							height: 50px;
							border-radius: 50%;
							position: absolute;
							background-color: #303030;
							z-index: 9;
						}

						.yuan1 {
							width: 40px;
							height: 40px;
							border-radius: 50%;
							position: absolute;
							background-color: #4A4A4A;
							z-index: 9;
						}

						.yuan2 {
							width: 35px;
							height: 35px;
							border-radius: 50%;
							position: absolute;
							background-color: #303030;
							z-index: 9;
						}

						.jiantou1 {
							height: 124px;
							position: absolute;

							image {
								position: absolute;
								top: 5px;
							}
						}

						.jiantou2 {
							height: 124px;
							position: absolute;

							image {
								position: absolute;
								top: 95px;
								z-index: 9;
								transform: rotate(calc(180deg));
							}
						}
					}


				}

				.jiajiang {
					margin-left: 40px;

					.item {
						margin-bottom: 20px;

						.text {
							color: #fff;
						}

						.quan {
							width: 70px;
							margin-left: 10px;
						}

					}


				}

			}

			.buchang {
				margin: 20px auto 0;
				width: 100%;

				.text {
					color: #fff;
					margin: 0 20px;
				}
			}

			.yuzhidian {
				padding: 14px 0;

				.zhuandao {
					width: 78px;
					height: 32px;
					background: #585858;
					border-radius: 6px;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.41) inset, 0px -3px 10px 0px #818181 inset, 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
					margin-left: 24px;

					.text {
						color: #fff;
						margin-left: 5px;
					}
				}

				.set {
					margin-top: 14px;

					.text {
						color: #fff;
						margin-left: 5px;
					}
				}

				.box {
					width: 180px;
					height: 32px;
					background: #5c5c5c;
					border-radius: 6px;
					margin-left: 14px;

					.text {
						font-size: 14px;
						margin-left: 14px;
					}
				}



			}

			.paixu {
				margin-top: 10px;

				.titleItem {
					width: 380px;
					height: 40px;
					background: #5b5b5b;
					font-size: 14px;
					font-family: Microsoft YaHei, Microsoft YaHei-400;
					font-weight: 400;
					text-align: CENTER;
					color: #ffffff;
					margin-bottom: 3px;

					.item1 {
						width: 30px;
						text-align: center;
						margin-left: 10px;
						margin-right: 30px;
					}

					.item2 {
						width: 180px;
						margin-right: 10px;
						text-align: left;
					}

					.item3 {
						width: 120px;

						.bianji {
							.text {
								font-size: 14px;
								font-family: Source Han Sans CN, Source Han Sans CN-400;
								font-weight: 400;
								text-align: CENTER;
								color: #43c4ff;
								margin-left: 5px;
								white-space: nowrap;
							}
						}

						.shanchu {
							margin-left: 10px;

							.text {
								font-size: 14px;
								font-family: Source Han Sans CN, Source Han Sans CN-400;
								font-weight: 400;
								text-align: CENTER;
								color: #D46262;
								margin-left: 5px;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

	}

	.customNode1 {
		background: #1e1e1e;
		width: 100%;
		position: absolute;
		height: 42px;
		left: 0;

		.xuanZhong {
			width: 4px;
			height: 42px;
			background: #165fff;
		}

		.dian {
			margin-right: 14px;
			position: relative;
			z-index: 9;
			width: 30px;
			height: 50px;

			.xiaodian {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #fff;
				margin-left: 3px;
			}

			.xuanXiang {
				position: absolute;
				width: 108px;
				height: 84px;
				background: #1e1e1e;
				border: 1px solid #383838;
				border-radius: 6px;
				box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
				left: -75px;
				top: 40px;

				.item {
					width: 106px;
					height: 36px;

					.itmeIocn {
						width: 16px;
						margin: 0 5px;
					}

					.itemName {}
				}

				.item:hover {
					background: #165fff;
				}

			}
		}
	}

	.custom-tree-node::-webkit-scrollbar {
		display: none;
		/* Chrome 和 Safari 隐藏滚动条 */
	}

	.custom-tree-node {
		min-width: 350px;
		position: relative;

		.dian {
			margin-right: 14px;
			height: 42px;
			position: absolute;
			right: 0;

			.xiaodian {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #fff;
				margin-right: 3px;
			}

			.xuanXiang {
				position: absolute;
				width: 70px;
				height: 34px;
				background: #1e1e1e;
				border: 1px solid #383838;
				border-radius: 6px;
				box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
				left: -75px;
				top: 3px;


				.item {
					height: 35px;

					text {
						padding-left: 20px;
					}
				}

				.item:hover {
					background: #165fff;
				}

			}
		}
	}

	.img {
		width: 100%;
		height: 100%;
	}
</style>